<template>
  <t-dialog v-model:visible="addbox"  @confirm="submittask">
    <p>{{ count }}</p>
    <t-space direction="vertical">
    <p class="task-text">Add Task</p>
    <t-input v-model="taskname" label="Taskname:"  placeholder="Name of your task" />
    <t-input v-model="during" label="Duration:" suffix="min" placeholder="Needed time" />
    <t-input v-model="description" label="Description:"  placeholder="Description of the task" />
    <t-select v-model="prority" label="Prority:" valueType="value" placeholder="Please choose priority">
          <t-option key="urgent" value="Urgent" />
          <t-option key="normal"  value="Normal"/>
          <t-option key="unhurried"  value="Unhurried" />
    </t-select>
    <t-select v-model="category" label="Category:" valueType="value" placeholder="Please choose priority" >
          <t-option key="work" value="Work" />
          <t-option key="rest"  value="Break"/>
          <t-option key="play" value="Relaxtion" />
          <t-option key="shop" value="Study" />
          <t-option key="others" value="Others" />
    </t-select>
  </t-space>
      </t-dialog>


  <div class="taskbox">

    <div class="left-botton">
      <t-button @click="addbox=true" class="botton" shape="circle" size="large" >
      <t-icon name="pen-ball"></t-icon>
      </t-button>
    </div>

    <div class="card">
        <t-icon name="gesture-right" style="z-index: 1 ;float: left;" size="35px" ></t-icon>
        <div class="blue-box"><p style="white-space: nowrap; color: rgb(255, 255, 255); font-weight: bold;">To be done</p></div>
    
        <div class="custom-box">

          <div v-for="task in tasks" :key="task.taskname" class="task-item-box">
            <div class="priority-box" v-if="task.prority">{{ task.prority }}</div>          
            {{ task.taskname }}
            <span class="space"></span> {{ task.during }} mins
            <span class="space"></span>{{ task.description }}
            <span class="space"></span>{{ task.category }}
            <t-button @click="starttask(task)" class="startbotton">start</t-button>

        </div>
        </div>
    </div>
  </div>

<div class="finishedtaskbox">
      <div class="card">
        <t-icon name="logo-twitter" style="z-index: 1 ;float: left;" size="35px" ></t-icon>
        <div class="blue-box"><p style="white-space: nowrap; color: white; font-weight: bold;">Already Done</p></div>

        <div class="custom-box">
          <div v-for="task in finishedTasks" :key="task.taskname" class="task-item-box">
          <div class="priority-box" v-if="task.prority">{{ task.prority }}</div>
          {{ task.taskname }}
        <span class="space"></span> {{ task.during }} mins
        <span class="space"></span>{{ task.description }}
        <span class="space"></span>{{ task.category }}
      </div>
      </div>
    </div>
</div>


</template>
<script>
  export default {
    created() {
    this.loadTasksFromLocalStorage();
  },
  data() {
    return {
      newTask: "",
      tasks: [],
      finishedTasks: [],
      addbox:false,
      taskname:"",
      during:"",
      description:"",
      prority:"",
      category:"",
    };
  },
  methods: {
  saveTasksToLocalStorage() {
    // 将任务数据保存到本地存储
    localStorage.setItem('tasks', JSON.stringify(this.tasks));
    localStorage.setItem('finishedTasks', JSON.stringify(this.finishedTasks));
  },

  loadTasksFromLocalStorage() {
    // 从本地存储中加载任务数据
    const finishedTasks = JSON.parse(localStorage.getItem('finishedTasks')) || [];
      // 将已完成的任务添加到任务列表中
      this.$data.finishedTasks = finishedTasks;
  },

    addTask() {
      if (this.newTask.trim() !== "") {
        this.tasks.push(this.newTask);
        this.newTask = "";
      }
    },
    // generateShortId() {
    //   // 生成相对较短的 task_id，可以使用时间戳和随机数
    //   return (new Date().getTime() + Math.floor(Math.random() * 1000))%100;
    // },
    submittask()
    {
      this.count++;
      const task = {
        // task_id: generateUniqueId(),
        taskname: this.taskname,
        during: this.during,
        description: this.description,
        prority:this.prority,
        category:this.category,
      };
      
      this.appendTaskToCustomBox(task);
      this.cleartask();
    },

    appendTaskToCustomBox(task) {
      const customBox = document.querySelector('.custom-box');
      
      const taskItem = document.createElement('div');
      taskItem.classList.add('task-item-box'); // 使用原有的样式类，你可以根据需要调整
      taskItem.innerHTML = `
      <div class="priority-box">${task.prority}</div>
      {{ task.taskname }}
      <span class="space"></span> {{task.during}}min
      <span class="space"></span>{{ task.description }}
      <span class="space"></span>{{ task.category }}
      <t-button @click="starttask(task)" class="startbotton">start</t-button>
    `;

      this.tasks.push(task);
    },

//   customBox.appendChild(taskItem);
// },
// //       for (const obj of tasks) {
// //         for (const key in obj) {
// //           if (obj.hasOwnProperty(key)) {
// //           const value = obj[key];
// //           console.log(key + ": " + value);
// //     }
// //   }
// // }
    
    cleartask()
    {
      this.taskname="",
      this.during=0,
      this.description="",
      this.count=0
    },
    starttask(arg){
      const task={
        taskname:arg.taskname,
        during:arg.during
      }
      this.finishedTasks.push(task);

  // 将已完成的任务保存到 localStorage
  localStorage.setItem('finishedTasks', JSON.stringify(this.finishedTasks));

      const data=JSON.stringify(task)
      this.$router.push({path:'/clock',query: {data:data}})
    }
    },

};
</script>
<style>
  .left-botton
  {
    position: absolute;
    z-index: 1;
    top:20px;
    left:320px;
  }
  .card {
  border: 1px solid #ccc;
  padding: 20px;
  background-color: #fff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  width: 400px;
  height: 450px;
  opacity: 1;
  border-radius: 40px;
  }

  .taskbox{
    position: absolute;
    top: 120px; /* 垂直居中 */
    left: 320px; /* 水平居中 */
    z-index: 0;
  }
  .finishedtaskbox{
    position: absolute;
    top:120px;
    left:770px;
    z-index: 1;
  }
  .blue-box
  {
    border: 1px solid #ccc;
    border-radius: 10px; /* 设置圆角 */
    padding: 20px;
    background-color: rgba(70, 115, 228, 0.8);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    width: 120px;
    height: 25px;
    opacity: 1;
    border-radius: 40px;
    left:35px;
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
  }
  .task-text {
  font-family: "Arial", sans-serif; /* 设置字体样式 */
  font-size: 16px; /* 设置字体大小 */
  font-weight: bold; /* 设置字体粗细 */
  color: #333; /* 设置字体颜色 */
}
ul {
  list-style-type: none; /* 移除小点 */
  padding: 0;/* 去除默认的内边距 */
}
.custom-box {
    border: 1px solid #cccccc;
    border-radius: 10px;
    padding: 20px;
    background-color: hsla(160, 100%, 37%, 0.1);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    width: 350px;
    height: 340px; /* 调整框的高度 */
    margin-top: 20px;
  }

.priority-box {
    background-color: rgba(70, 115, 228, 0.8);
    color: white;
    padding: 5px;
    border-radius: 5px;
    margin-right: 10px;
  }
  
.startbotton
{
  justify-content: center;
  align-items:center;
  margin-left: auto;

}
.task-item-box
{
    border: 1px solid #ccc;
    border-radius: 10px; /* 设置圆角 */
    padding: 20px;
    background-color: rgba(70, 223, 228, 0.8);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    height: 25px;
    opacity: 1;
    border-radius: 40px;
    left:50px;
    display: flex;
    justify-content: left; /* 水平居中 */
    align-items: center; /* 垂直居中 */
}
.box-task-text
{
  font-family: "Arial", sans-serif; /* 设置字体样式 */
  font-size: 20px; /* 设置字体大小 */
  font-weight: bold; /* 设置字体粗细 */
  color: #faf5f5; /* 设置字体颜色 */
}
.space
{
  width:5%
}
</style>